<template>
  <div class="contract-info">
    <!-- 搜索框模块 -->
    <el-card>

      <template #header>
        <div >
          <span style="font-weight: bold;">基本信息</span>
        </div>
      </template>

      <el-row>
        <el-col :span="24">
          <el-form :model="form" label-width="100px" :rules="rules" ref="contractTemplateRef">
            <el-row :gutter="24">

              <el-col :span="9">
                <el-form-item label="模板名称" id="index" prop="name">
                  <el-input
                    placeholder="请输入模板名称"
                    clearable
                    v-model="form.name"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="4">
                <el-form-item label="状态">
                    <el-radio-group v-model="form.status" class="ml-4">
                      <el-radio v-for="item in contract_status" :label="item.value" >{{ item.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>
              </el-col>

            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item label="模板说明" id="illustrate" prop="illustration">
                  <el-input v-model="form.illustration" type="textarea" show-word-limit maxlength="500" />
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <el-card style="margin-top: 20px;">
      <template v-slot:header>
          <div>
              <span style="font-weight: bold;">合同模板内容</span>
          </div>
      </template>
      <div class="editor-box">
        <QuillEditor content-type="html" ref="myQuillEditor" theme="snow" v-model:content="form.content" :options="editorOption" ></QuillEditor>
      </div>
    </el-card>

    <div class="submit-box">
      <el-button type="primary" @click="handleSubmit">确定</el-button>
      <el-button @click="handleCancel" >取消</el-button>
    </div>

  </div>
</template>

<script setup>
  import { Base64 } from 'js-base64'

  import {
    addNewContractTemplate,
    editContractTemplate
  } from "../../../api/contractTemplate/index"

  import {
    ref,
    reactive,
    onMounted
  } from "vue"

  import { useRouter } from "vue-router"

  import { ElMessage } from "element-plus"

  import {
    QuillEditor,
    Quill
  } from '@vueup/vue-quill'

  import '@vueup/vue-quill/dist/vue-quill.snow.css'

  // import 'quill-better-table/dist/quill-better-table.css'; // 插件样式
  // import QuillBetterTable from 'quill-better-table';

  const fontSize = Quill.import('attributors/style/size') // 引入这个后样式写在style上
  fontSize.whitelist = [ false, '12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px' ]
  Quill.register(fontSize, true)

  // Quill.register('modules/QuillBetterTable', QuillBetterTable,true);

  // Quill.register({
  //   'modules/better-table': QuillBetterTable
  // }, true)

  // 自定义字体类型
  const fonts = [ false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif', '宋体', '黑体' ]

  const Font = Quill.import('attributors/style/font')
  Font.whitelist = fonts
  Quill.register(Font, true);

  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
    // [{ align: [] }], // 对齐方式----- 手动展开[{ align: [] }]
    [{ align: '' }, { align: 'center' }, { align: 'right' }], // 对齐方式----- 默认展开
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
    [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
    [{ size:   fontSize.whitelist}], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
    //fontSizeStyle.whitelist  ['small', false, 'large', 'huge']
    [{ font: Font.whitelist }], // 字体种类-----[{ font: [] }]
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ direction: 'ltl' }, { direction: 'rtl' }], // 文本方向-----[{'direction': 'ltl'}]  [{'direction': 'rtl'}]
    [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
    [{ color: [] }, { background: [] }, 'blockquote', 'clean'], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
    // ['blockquote'], // 引用  代码块-----['blockquote', 'code-block']
    // ['clean'], // 清除文本格式-----['clean']
    // ['link', 'image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']
    // ['table']
  ]

  const { proxy } = getCurrentInstance();

  const router = useRouter()

  // 富文本的实例对象
  const myQuillEditor = ref()

  const editorOption = ref({
    modules:{
      //   table: true,  // disable table module
      //   'better-table': {
      //   operationMenu: {
      //     items: {
      //       unmergeCells: {
      //         text: 'Another unmerge cells name'
      //       }
      //     },
      //     color: {
      //       colors: ['#fff', 'red', 'rgb(0, 0, 0)'],  // colors in operationMenu
      //       text: 'Background Colors'  // subtitle
      //     }
      //   }
      // },
      // keyboard: {
      //   bindings: QuillBetterTable.keyboardBindings
      // },
      toolbar: toolbarOptions,
    },
    placeholder: "请输入内容"
  })

  // 路由设置params传参，设置占位符，设置props：true，将占位符当做组件props参数传递给当前组件
  const props = defineProps([ "id", "content", "status", "illustration", "name" ])

  // 字典-指标单位
  const { assess_status,contract_status } = proxy.useDict("assess_status","contract_status");

  // 编辑要用的id
  const editId = ref("");

  const form = reactive({
    name: "",
    illustration: "",
    status: "",
    content: ""
  });

  const rules = reactive({
      name: [
          { required: true, message: "请输入模板名称", trigger: "blur" },
          { required: true, min: 1, max: 50, message: "模板名称不超过50个字符", trigger: "blur" }
      ],
      illustration: [
          { required: false, message: "请输入模板说明", trigger: "blur" },
          { required: false, min: 0, max: 500, message: "模板说明不超过500个字符", trigger: "blur" }
      ]
  })

  // 分页


  // 单选状态选中触发


  // 页面挂载时
  onMounted(()=>{
    const quill = toRaw(myQuillEditor.value).getQuill()

    editId.value = props.id
    form.illustration = props.illustration
    form.name = props.name
    form.status = props.status? props.status:'1'
    form.content = Base64.decode(props.content)

  })

  // 点击确定按钮
  const handleSubmit=()=>{
    proxy.$refs["contractTemplateRef"].validate((valid) => {
      if(valid) {
        if(!form.content){
          ElMessage({
            message: '请填写合同内容',
            type: 'error',
          })
          return false
        }

        if(form.content.length > 100000) {
          ElMessage({
            message: '合同内容不超过10万个字符',
            type: 'error',
          })
          return false
        }

        // 组装参数
        const params={
          name: form.name,
          illustration: form.illustration,
          status: form.status,
          content: Base64.encode(form.content)
        }

        if(!editId.value){
          // 新增
          addNewContractTemplate(params).then((res)=>{
            ElMessage({
              message: '新增成功',
              type: 'success',
            })

            // 清空数据
            clearData()

            // 跳转到第1层
            router.push({name:'ContractTemplate'})
          }).catch((error)=>{})
        } else {
          // 修改
          const editParams={
            id: editId.value,
            name: form.name,
            illustration: form.illustration,
            status: form.status,
            content: Base64.encode(form.content)
          }
          editContractTemplate(editParams).then((res)=>{
            ElMessage({
            message: '修改成功',
            type: 'success',
          })

          // 清空数据
          clearData()

          // 跳转到第1层
          router.push({ name: 'ContractTemplate'})
          }).catch((error)=>{
            ElMessage.error(error.msg)
          })
        }
      }
    })
  }

  // 清空数据
  const clearData=()=>{
    // 清空数据时修改的id为空
    editId.value = ""
    form.name = "",
    form.illustration = "",
    form.status = "1",
    form.content = ""
  }

  // 点击取消按钮
  const handleCancel=()=>{
    clearData()
    // 跳转到第1层
    router.push({name:'ContractTemplate'})
  }
</script>

<style lang="scss" scoped>
  .contract-info {
    padding: 20px;
  }

  :deep(.el-form-item[id="index"] .el-form-item__label) {
    // border:1px solid orange;
    width: 80px !important;
  }

  // 模板说明文字对齐
  :deep(.el-form-item[id="illustrate"] .el-form-item__label) {
    // border:1px solid orange;
    width: 80px !important;
  }

  // 文本域高度调整
  :deep(.el-textarea__inner){
    min-height: 80px!important;
  }

  // 富文本的高度调整
  .editor-box{
    // border: 1px solid red;
    height: 320px;
    width: 100%;
    :deep(.ql-editor){
      border: 1px solid #d1d5db;
      height: 276px;
    }

    :deep(.ql-container.ql-snow){
      border: 1px solid #fff;
    }

  }

  // 提交按钮的盒子
  .submit-box{
    display: flex;
    flex-direction:row;
    justify-content: flex-end;
    margin-top: 40px;

  }

  // 底部提交按钮
  .el-button{
    width: 80px;
    margin-right: 10px;
  }

</style>

<style>
  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "字号";
  }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
    content: '12px';
  }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    content: "14px";
  }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: "16px";
  }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    content: "18px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: "20px";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
    content: "24px";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
    content: "28px";
  }

    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
    content: "32px";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "正文" !important;
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1" !important;
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2" !important;
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3" !important;
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4" !important;
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5" !important;}
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6" !important;
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "字体" !important;
  }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
  content: "Arial" !important;
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
  content: "SimSun" !important;
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
  content: "SimHei" !important;
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
  content: "微软雅黑" !important;
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
  content: "Arial" !important;
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
  content: "罗马" !important;
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
  content: "楷体" !important;
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
  content: "sans-serif" !important;
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="宋体"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="宋体"]::before {
  content: "宋体" !important;
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="黑体"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="黑体"]::before {
  content: "黑体" !important;
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
  content: "仿宋" !important;
  }
</style>

